let inpEle = document.querySelectorAll("input");
let btn = document.getElementsByTagName("button")[0];
let svgEle = document.getElementsByTagName("svg")[0];
let shuaxin = document.getElementsByClassName("shuaxin")[0];


//初始化增加一系列用户
initUsers();
var users_list = getUsers();

btn.addEventListener("click", function(event) {
	//获取用户数据
	// let user = [{
	// 	username: "zs",
	// 	pwd: 123
	// }]
	let username = inpEle[0].value;
	let pwd = inpEle[1].value;
	// console.log(username)
	// console.log(pwd)
	//获取验证码
	let code = svgEle.dataset.str;
	let admin = JSON.parse(localStorage.getItem("users"));


	let has_contain_username = false;
	let has_contain_password = false;
	let exist_uid = "";
	for (let i = 0; i < users_list.length; i++) {
		if (users_list[i].username == username || users_list[i].uid == username) {
			has_contain_username = true;
			if (users_list[i].password == pwd) {
				exist_uid = users_list[i].uid;
				has_contain_password = true;
			}
		}
	}

	if (has_contain_username == false) {
		alert('用户或昵称不存在,请检查!');
		return;
	}

	if (has_contain_password == false) {
		alert("密码错误，请重新输入！");
		[...inpEle].forEach(item => item.value = "");
		codeRender();
		event.preventDefault();
		return;
	}

	if (inpEle[2].value.toLowerCase() !== code.toLowerCase()) {
		alert("验证码错误！");
		inpEle[2].value = "";
		codeRender();
		return;
	}

	alert("恭喜您登录成功！");
	//登录成功
	$.cookie("uid", exist_uid, {
		expires: 3,
		path: '/'
	});
	$.cookie("pswd", pwd, {
		expires: 3,
		path: '/'
	});
	 window.location.href = "./index.html"; 
});


//画验证码
function codeRender() {
	//进来就清空验证码框的样式 
	svgEle.innerHTML = "";
	let clientWidth = svgEle.clientWidth;
	let clientHeight = svgEle.clientHeight;

	//创建文档碎片
	let docFra = document.createDocumentFragment();

	//添加线条节点到svg节点中
	let lines = createLineNode(5, 5, clientHeight, clientWidth, docFra);
	svgEle.appendChild(lines);

	//添加文本节点到svg节点中
	let texts = createTextNode(5, clientWidth, docFra);
	svgEle.appendChild(texts[0]);

	//给svg标签加一个自定义属性
	svgEle.dataset.str = texts[1];
}
codeRender();



//随机字母和数字
function createTextNode(num, clientWidth, docFra) {
	//获取字符水平方向可以移动的距离
	let maxX = parseInt(clientWidth / num);
	// console.log(maxX);
	let str = ``;
	for (let i = 0; i < num; i++) {
		let textNode = document.createElementNS("http://www.w3.org/2000/svg", "text");
		//获取字符
		let char = getChar();
		//不区分大小写
		//用str拼接所有的字符，为了方便登录时进行验证 
		str += char;
		let re = /^[a-z]$/img;
		//判断字符是否为字母，且会随机变大写字母
		//test方法查找:在char里面查找re;返回Boolean值，满足返回true，不满足返回false
		//getRandom(0，1):意思是让字母进来了随机成为8或者1，因为0会直接隐式转换为false就进入不了这个判断，
		//所以只有当它随机为1时，才会进入if，并转换为大写字母。 
		if (re.test(char) && getRandom(0, 1)) {
			//设置字母为大写字母
			char = char.toUpperCase();
		}
		//把字符添加到节点中
		textNode.innerHTML = char;
		//设置字符的基线位置
		// console.log(maxX * i);
		// console.log(maxX * (i + 1) - 30);
		textNode.setAttribute("x", getRandom(maxX * i, Math.abs(maxX * (i + 1) - 30)));
		textNode.setAttribute("y", 30);
		textNode.style.fontSize = 30 + "px";
		textNode.style.transform = `rotate($ {getRandom(0,5)}deg)`;
		//线条的颜色样式
		textNode.style.fill = `rgba(${getRandom(0, 255)},${getRandom(0,255)},${getRandom(0,255)},1)`;
		docFra.appendChild(textNode);
	}
	return [docFra, str];
}

//字符组
function getChar() {
	let str = `0123456789abcdefghijklmnopqrstuvwxyz`;
	return str[getRandom(0, str.length - 1)];
}

//随机线条
function createLineNode(num, lineWidth, clientHeight, clientWidth, docFra) {
	for (let i = 0; i < num; i++) {
		//添加线条
		let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
		//起始坐标和终止坐标
		line.setAttribute("x1", getRandom(0, clientWidth));
		line.setAttribute("y1", getRandom(0, clientHeight));
		line.setAttribute("x2", getRandom(0, clientWidth));
		line.setAttribute("y2", getRandom(0, clientHeight));
		line.style.stroke = `rgba(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,10)/10})`;
		line.style.strokeWidth = getRandom(0, lineWidth);
		//把线条添加到文档碎片中去 
		docFra.appendChild(line);
	}
	//返回这个文档碎片 
	return docFra;
}
//刷新文本
shuaxin.onclick = function(ev){
	//点击刷新文本，重新渲染
	codeRender();
	ev.preventDefault();
}

//获取随机数
function getRandom(min, max = 0) {
	if (min > max) {
		[min, max] = [max, min];
	}
	return parseInt(Math.random() * (max - min + 1)) + min;
}